.slider {
  height: 100%;
  width: 100%;
  display: flex;
}

.slider > div {
  flex: 1;
  height: 37px;
  line-height: 37px;
}

.slider > div:nth-child(1) {
  padding-left: 15px;
}

.sliderBtn {
  position: relative;
}

.sliderBtn > div {
  height: 25px;
  line-height: 25px;
  text-align: center;
  margin-top: 6px;
  float: left;
  border-radius: 5px;
}

.sliderBtn > div:nth-child(1) {
  background-color: #d01935;
  margin-left: 50px;
}

.sliderBtn > div:nth-child(2) {
  background-color: #50e33c;
}

.sliderBtn > div:nth-child(3) {
  line-height: 25px;
  margin-left: 10px;
}

.sliderBtn > div > div {
  line-height: 25px;
  padding: 0 15px;
}

.secondTypeSlider > input,
.sliderBtn > input {
  -webkit-appearance: none;
  position: absolute;
  width: 220px;
  border-radius: 15px;
  background: transparent;
  height: 0;
}

.sliderBtn > input:nth-of-type(1) {
  top: 15px;
  left: 40px;
}

.secondTypeSlider > input[type=range]::-webkit-slider-thumb,
.sliderBtn > input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.secondTypeSlider > input[type=range]::-webkit-slider-runnable-track,
.sliderBtn > input[type=range]::-webkit-slider-runnable-track {
  height: 20px;
  border-radius: 5px;
}

.secondTypeSlider > input[type=range]:focus,
.sliderBtn > input[type=range]:focus {
  outline: none;
}

.secondTypeSlider > input[type=range]::-webkit-slider-thumb,
.sliderBtn > input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 25px;
  width: 6px;
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
}

.secondTypeSlider > div {
  height: 25px;
  line-height: 25px;
  text-align: center;
  float: left;
  border-radius: 5px;
}

.secondTypeSlider > input:nth-of-type(1) {
  top: 0;
  left: -10px;
}

.secondTypeSlider > input:nth-of-type(2) {
  bottom: 0;
  left: -10px;
}

.secondTypeSlider > input[type=range]::-webkit-slider-thumb {
  height: 15px;
  border-radius: 5px;
}

.secondTypeSlider > input:nth-of-type(1)::-webkit-slider-thumb {
  margin-top: 10px;
}

.secondTypeSlider > input:nth-of-type(2)::-webkit-slider-thumb {
  margin-top: -5px;
}

.secondTypeSlider > div:nth-child(3) {
  position: absolute;
  left: -28px;
}

.secondTypeSlider > div:nth-child(4) {
  position: absolute;
  right: -28px;
}